document.addEventListener('DOMContentLoaded', function () {
    const row1 = document.getElementById('row1');
    const row1prevBtn = document.getElementById('row1prevBtn');
    const row1nextBtn = document.getElementById('row1nextBtn');
    const row1currentPage = document.getElementById('row1currentPage');

    let currentPage = 1;
    const totalPageCount = 3;

    function showPage(page) {
        const elements = row1.querySelectorAll('.card');
        elements.forEach(element => {
            if (element.getAttribute('data-page') === page.toString()) {
                element.style.display = 'block';
            } else {
                element.style.display = 'none';
            }
        });

        row1currentPage.textContent = page;
    }

    function nextPage() {
        if (currentPage < totalPageCount) {
            currentPage++;
            showPage(currentPage);
        }
    }

    function prevPage() {
        if (currentPage > 1) {
            currentPage--;
            showPage(currentPage);
        }
    }
    showPage(currentPage);
    row1nextBtn.addEventListener('click', nextPage);
    row1prevBtn.addEventListener('click', prevPage);
});
